<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 15 - Filters</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	
	<script src="../../bin/pixi.dev.js"></script>
	<script src="dat.gui.min.js"></script>

</head>
<body>
	<script>
	var renderer = PIXI.autoDetectRenderer(630, 410);
	renderer.view.style.position = "absolute"
	renderer.view.style.width = window.innerWidth + "px";
	renderer.view.style.height = window.innerHeight + "px";
	renderer.view.style.display = "block";
	
	var filtersSwitchs = [true, false, false, false, false, false, false, false, false, false, false];

	// add render view to DOM
	document.body.appendChild(renderer.view);

	var gui = new dat.GUI({});
	
	//// 

	var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
	var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);

	var displacementFolder = gui.addFolder('Displacement');
	displacementFolder.add(filtersSwitchs, '0').name("apply");
	displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
	displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");

	var blurFilter = new PIXI.BlurFilter();

	var blurFolder = gui.addFolder('Blur');
	blurFolder.add(filtersSwitchs, '1').name("apply");
	blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
	blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");

	////
	
	var pixelateFilter = new PIXI.PixelateFilter();

	var pixelateFolder = gui.addFolder('Pixelate');
	pixelateFolder.add(filtersSwitchs, '2').name("apply");
	pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
	pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");

	////

	var invertFilter = new PIXI.InvertFilter();

	var invertFolder = gui.addFolder('Invert');
	invertFolder.add(filtersSwitchs, '3').name("apply");
	invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");

	////

	var grayFilter = new PIXI.GrayFilter();

	var grayFolder = gui.addFolder('Gray');
	grayFolder.add(filtersSwitchs, '4').name("apply");
	grayFolder.add(grayFilter, 'gray', 0, 1).name("Gray");

	////

	var sepiaFilter = new PIXI.SepiaFilter();

	var sepiaFolder = gui.addFolder('Sepia');
	sepiaFolder.add(filtersSwitchs, '5').name("apply");
	sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");

	////

	var twistFilter = new PIXI.TwistFilter();

	var twistFolder = gui.addFolder('Twist');
	twistFolder.add(filtersSwitchs, '6').name("apply");
	twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
	twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
	
	twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
	twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;

	////

	var dotScreenFilter = new PIXI.DotScreenFilter();

	var dotScreenFolder = gui.addFolder('DotScreen');
	dotScreenFolder.add(filtersSwitchs, '7').name("apply");
	dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
	dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);

	////

	var colorStepFilter = new PIXI.ColorStepFilter();
	
	var colorStepFolder = gui.addFolder('ColorStep');
	colorStepFolder.add(filtersSwitchs, '8').name("apply");

	colorStepFolder.add(colorStepFilter, 'step', 1, 100);
	colorStepFolder.add(colorStepFilter, 'step', 1, 100);

	////

	var crossHatchFilter = new PIXI.CrossHatchFilter();
	
	var crossHatchFolder = gui.addFolder('CrossHatch');
	crossHatchFolder.add(filtersSwitchs, '9').name("apply");


//	var filterCollection = [blurFilter, pixelateFilter, invertFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, //colorStepFilter, crossHatchFilter];

	var rgbSplitterFilter = new PIXI.RGBSplitFilter();
	
	var rgbSplitFolder = gui.addFolder('RGB Splitter');
	rgbSplitFolder.add(filtersSwitchs, '10').name("apply");


	var filterCollection = [displacementFilter, blurFilter, pixelateFilter, invertFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];


	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFF0000, true);
	
	

	var pondContainer = new PIXI.DisplayObjectContainer();
	stage.addChild(pondContainer);

	stage.interactive = true;
	
	var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
	pondContainer.addChild(bg);

	//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
	//littleDudes.position.y = 100;
	var padding = 100;
	var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
	var fishs = [];


	for (var i = 0; i < 20; i++) 
	{
		var fishId = i % 4;
		fishId += 1;

		//console.log("displacement_fish"+fishId+".png")
		var fish =  PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
		fish.anchor.x = fish.anchor.y = 0.5;
		pondContainer.addChild(fish);

		//var direction 
		//var speed = 
		fish.direction = Math.random() * Math.PI * 2;
		fish.speed = 2 + Math.random() * 2;
		fish.turnSpeed = Math.random() - 0.8;

		fish.position.x = Math.random() * bounds.width;
		fish.position.y = Math.random() * bounds.height;
		//fish.speed = new PIXI.Point(0,0)

		fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
		fishs.push(fish);

	};
	
	var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
	overlay.alpha = 0.1//0.2
	pondContainer.addChild(overlay);


	
	
	//pondContainer.filters = [displacementFilter];

	

	displacementFilter.scale.x = 50;
	displacementFilter.scale.y = 50;

	

	
	
	
	
	var count = 0;
	var switchy = false;
	
	/*
	 * Add a pixi Logo!
	 */
	var logo = PIXI.Sprite.fromImage("../../logo_small.png")
	stage.addChild(logo);
	
	logo.anchor.x = 1;
	logo.anchor.y = 1;

	logo.position.x = 630
	logo.scale.x = logo.scale.y = 0.5;
	logo.position.y = 400;
	logo.interactive = true;
	logo.buttonMode = true;
	
	logo.click = logo.tap = function()
	{
		window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
	}
	
	
	requestAnimFrame(animate);

	function animate() {
		
		count += 0.1;
		
		var blurAmount = Math.cos(count) ;
		var blurAmount2 = Math.sin(count * 0.8)  ;

		var filtersToApply = [];

		for (var i = 0; i < filterCollection.length; i++) {
			
			if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
		};

		pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;

		for (var i = 0; i < fishs.length; i++) 
		{
			var fish = fishs[i];

			fish.direction += fish.turnSpeed * 0.01;
			fish.position.x += Math.sin(fish.direction) * fish.speed;
			fish.position.y += Math.cos(fish.direction) * fish.speed;

			fish.rotation = -fish.direction - Math.PI/2;

			// wrap..
			if(fish.position.x < bounds.x)fish.position.x += bounds.width;
			if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width

			if(fish.position.y < bounds.y)fish.position.y += bounds.height;
			if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
		}

	
		displacementFilter.offset.x = count * 10;
		displacementFilter.offset.y = count * 10;
		
		overlay.tilePosition.x = count * -10;
		overlay.tilePosition.y = count * -10;

	    renderer.render(stage);
	    requestAnimFrame( animate );
	}

	</script>

	<div style="position:absolute; bottom:0px; left:6px"> 

		<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.goodboydigital.com%2Fpixijs%2Fexamples%2F15%2FindexAll.html&amp;width=100&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;send=false&amp;appId=544967255569759" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

		<a href="https://twitter.com/share" class="twitter-share-button" data-via="goodboydigital">Tweet</a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	</div>

	</body>
</html>
